<!-- 引入 文件 -->
<link rel="stylesheet" href="./sourceFile/leaflet.css" />
<script src="./sourceFile/leaflet.js"> </script>
<!-- 增加地图高度 -->
<style>
#mapDiv { height: 800px; }
</style>
<!-- 创建一个 地图的div id 必须有 但是自定义 -->
<div id="mapDiv"></div>
<script>
        //到 mapbox 官网注册并创建下面的access token都是免费的，不过有5w次的浏览限制
        var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2FuZXdhbmciLCJhIjoiY2pwM2UxNHNkMGF1MzNwc2FtMnNhdXJsMCJ9.KZpCBtizDeltZO6JhGc6_w';
        //初始化 地图
        var leafletMap = L.map('mapDiv').setView([41, 123], 5);
        //将图层加载到地图上，并设置最大的聚焦还有map样式
        L.tileLayer(url, {
                maxZoom: 18,
                id: 'mapbox.streets'
        }).addTo(leafletMap);
        //增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
        L.marker([41, 123]).addTo(leafletMap)
                .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
        //增加一个圈，设置圆心、半径、样式
        L.circle([41, 123], 500, {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5
        }).addTo(leafletMap).bindPopup("I am a circle.");
        //增加多边形
        L.polygon([
                [41, 123],
                [39, 121],
                [41, 126]
        ]).addTo(leafletMap).bindPopup("I am a polygon.");
        //为点击地图的事件 增加popup
        var popup = L.popup();
        function onMapClick(e) {
                popup
                        .setLatLng(e.latlng)
                        .setContent("You clicked the map at " + e.latlng.toString())
                        .openOn(leafletMap);
        }
        leafletMap.on('click', onMapClick);
</script>